<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="../static/css/bootstrap.css">
    <link rel="stylesheet" href="../static/css/abchat.css">
</head>
<body class="login">
<div class="container">
    <form class="form-signin" onsubmit="return false;" >
        <h3 class="form-signin-heading">ABChat | 登录</h3>
        <div class="form-group">
            <div class="form-label">
                <label for="account">账号</label>
                <label class="form-message hidden"></label>
            </div>
            <input type="text" id="account" class="form-control" placeholder="用户名 / 邮箱" required autofocus>
        </div>
        <div class="form-group">
            <div class="form-label">
                <label for="password">密码</label>
                <label class="form-message hidden"></label>
            </div>
            <input type="password" id="password" class="form-control" required>
        </div>

        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> 记住账号
            </label>
            <label class="a-group">
                <a class="signup" href="register.html">注册账户</a>
                <span> |</span>
                <a class="forget" href="password_forget.html">忘记密码</a>
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block submit-btn" type="submit">登录</button>
    </form>
</div>
<script src="../static/js/jquery-3.2.1.js"></script>
<script src="../static/js/bootstrap.js"></script>
<script src="../static/js/jquery.cookie.js"></script>
<script src="../static/js/http.js"></script>
<script src="../static/js/abchat.js"></script>
<script>
    $(function () {
        if($.cookie("remember")!="null"){
            $('#account').val($.cookie("remember"));
            $("input[type='checkbox']").attr("checked",'true');
        }
    });

    $('.submit-btn').on("click",function () {
        var text = "不能为空";
        var account = $('#account').val().trim();
        var password = $('#password').val().trim();
        var isRemember = $("input[type='checkbox']").is(':checked');
        if (account == ""){
            checkForm($('#account'),text);
            return false;
        }

        if (password == ""){
            checkForm($('#password'),text);
            return false;
        }

        var data = {
            "account": account,
            "password": password
        };
        httpPost(httpURL+"/auth/login", data, function (data) {
            var $parent = $('#account').parent();
            var $message = $parent.find('.form-message');
            if (data.code != 200){
                $message.text("账号或密码错误");
                $message.removeClass("hidden");
            }else {
                $message.addClass("hidden");
                //记住账号
                if (isRemember){
                    $.cookie("remember",account,{ expires: 7 });
                }else {
                    $.cookie("remember",null);
                }
            }
        })



    })

    $('#account, #password').on("keyup",function () {
        if ($(this).val().trim() != ""){
            errorDisplay($(this));
        }
    });

    $('#account').on("change",function () {
        var account = $(this).val().trim();
        if (account == ""){
            checkForm($(this),"不能为空");
            return false;
        }
    });

    $('#password').on("change",function () {
        // 进行用户名是否被注册检测
        var password = $(this).val().trim();
        if (password == ""){
            checkForm($(this),"不能为空");
            return false;
        }
    });
</script>
</body>
</html>